<template>
    <div class="container">
        <div class="header">
            <van-icon class="header-left" size="30" @click="goBack" name="arrow-left" />
            填写服务订单
        </div>
        <status-bar item="0" />
        <van-cell class="cell">
          <template #title>
            <van-image
              width="25"
              height="25"
              :src="createInfo.service.serviceImg"
            />
            <span class="server-name">{{ createInfo.service.serviceName }}</span>
          </template>
          <template #default>
            <div class="service-text">服务内容</div>
          </template>
        </van-cell>
        <van-cell-group  class="cell">
          <van-cell>
            <template #title>就诊医院</template>
            <template #default>
            <div @click="showHosipital =true" >
              {{ form.hospital_name ||"请选择就诊医院" }}
              <van-icon name="arrow" />
            </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>就诊时间</template>
            <template #default>
            <div @click="showStartTime =true" >
                {{ currentDate || "请选择就诊时间" }}
              <van-icon name="arrow" />
            </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>陪诊师</template>
            <template #default>
            <div @click="showComponion =true" >
                {{ companionName || "请选择陪护师" }}
              <van-icon name="arrow" />
            </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>接送地址</template>
            <template #default>
              <van-field 
                class="text"
                input-align="right"
                v-model="form.receiveAddress" 
                placeholder="请填写接送地址" 
              />
            </template>
          </van-cell>
          <van-cell>
            <template #title>联系电话</template>
            <template #default>
              <van-field 
                class="text"
                input-align="right"
                v-model="form.tel" 
                placeholder="请填写联系电话" 
              />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group title="服务需求"  class="cell">
          <van-field 
                class="text"
                style="height: 100px;"
                v-model="form.demand" 
                placeholder="请简单描述您要就诊的科室.." 
            />
        </van-cell-group>
        <van-button size="large" @click="submit" class="sumbit" type="primary">提交订单</van-button>
        <!-- 底部弹出 -->
        <van-popup
          v-model:show="showHosipital"
          position="bottom"
          :style="{ height: '30%' }"
        >
          <van-picker
            :columns="showHosipColumns"
            @confirm="showHosipConfirm"
            @cancel="showHosipital = false"
          />
        </van-popup>
        <van-popup
          v-model:show="showStartTime"
          position="bottom"
          :style="{ height: '30%' }"
        >
            <van-date-picker
              @confirm="showTimeConfirm"
              @cancel="showStartTime = false"
              title="选择日期"
              :min-date="minDate"
            />
        </van-popup>
        <van-popup
          v-model:show="showComponion"
          position="bottom"
          :style="{ height: '30%' }"
        >
            <van-picker
                :columns="componionColumns"
                @confirm="showComponionConfirm"
                @cancel="showComponion = false"
              />
        </van-popup>
        <!-- 支付二维码弹窗 -->
        <van-dialog :show-confirm-button="false" v-model:show="showCode" >
            <van-icon name="cross" class="close" @click="closeCode" />
            <div>微信支付</div>
            <van-image width="150" height="150" :src="codeImg" />
            <div>请使用本人微信扫描二维码</div>
        </van-dialog>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import StatusBar from '../../components/statusBar.vue'
import {onMounted,getCurrentInstance,reactive,ref,computed} from 'vue'
import Qrcode from 'qrcode'


const { proxy } = getCurrentInstance()

const createInfo = reactive({
      companion:[],
      hospitals:[],
      service:{}
})
onMounted(async ()=>{
   const {data} =await proxy.$api.h5Companion()
   
   Object.assign(createInfo,data.data)
   console.log(createInfo );
})
const router = useRouter()
//点击返回
const goBack = ()=>{
    router.go(-1)
} 
const form = reactive({})
//就诊医院
const showHosipital = ref(false)
const showHosipColumns = computed(()=>{
    return createInfo.hospitals.map(item =>{
      return {text:item.name,value:item.id}
    })
})
//选择医院
const showHosipConfirm = (item)=>{
  form.hospital_id = item.selectedOptions[0].value
  form.hospital_name =item.selectedOptions[0].text
  //关闭弹出层
  showHosipital.value = false
}
//选择就诊时间
const showStartTime = ref(false)
const currentDate = ref()
//最小日期
const minDate = ref(new Date())

const showTimeConfirm = (item)=>{
  const dateStr=item.selectedValues.join('-')
  currentDate.value = dateStr
  form.starttime = new Date(dateStr).getTime()
  showStartTime.value = false
}
//选择陪诊师
const showComponion = ref(false)
const componionColumns = computed(()=>{
    return createInfo.companion.map(item =>{
      return {text:item.name,value:item.id}
    })
})
//默认显示陪诊师名称
const companionName =ref()
const showComponionConfirm = (item)=>{
  form.companion_id = item.selectedOptions[0].value
  companionName.value = item.selectedOptions[0].text
  showComponion.value = false
}
//支付弹窗
const showCode = ref(false)
const codeImg = ref('')
//关闭支付弹窗
const closeCode = ()=>{
    showCode.value = false
    router.push('/order')
}
//提交表单
const submit =async ()=>{
  const params = [
  'hospital_id',
  'hospital_name',
  'demand',
  'companion_id',
  'receiveAddress',
  'tel',
  'starttime'
  ]
  for(const i of params){
    if(!form[i]){
      showNotify({ message: '请把每一项都填写' });
        return 
    }
  }
    const {data : orderRes} = await proxy.$api.createOrder(form)
  Qrcode.toDataURL(orderRes.data.wx_code).then((url)=>{
      showCode.value= true
      codeImg.value = url
  })
}
</script>
<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>